<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">jQuery Camera相册幻灯片插件</h3>
	</div>
	<div class="panel-body">
		<h3>关于</h3>
		<p>基于jQuery旋转轮播式CarouFredSel插件制作的焦点幻灯片特效，支持无限循环播放，carouFredSel是一个内容无限循环播放容器jQuery，可以展示任何类型的HTML元素。支持水平和垂直两个方向。项目的高度和宽度可以不相同。可以动态从容器中删除/添加项目，可以利用向前/向后按纽播放项目或设置成自动播放。<br>
			插件兼容IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62。<br>
			插件自带有39种样式可以使用。</p>
		<p>
			jQuery Camera项目主页：
			<a target="_blank" href="http://www.pixedelic.com/plugins/camera">http://www.pixedelic.com/plugins/camera</a>
		</p>
		<h3>通过HTML文档data属性</h3>
		<p>仅仅通过向页面元素添加<code>data-sea="seaCamera"</code> 就可以为其赋予代码语法高亮效果，以便方便浏览。通过 <code>data-option</code>设置可选参数<br>
			以下是可选参数：
		<ul>
			<li><code>target</code> 属性接受一个选择器，将选择器内的代码进行语法高亮输出；</li>
			<li><code>language</code> 属性接受一个高亮显示的语言名称，高亮显示按该语言语法进行显示，默认是HTML；</li>
			<li><code>style</code> 属性接受一个Query插件seaseaseaSnippet代码语法高亮效果的样式文件名，默认是random（随机）；</li>
			<li><code>clipboard</code> 属性接受一个剪切Flash控件的地址，默认是../SeaJS/seaseaseaSnippet/ZeroClipboard.swf，设定为flase则不显示剪切；</li>
			<li><code>showNum</code> 属性指定是否显示行号。默认是true；</li>
			<li><code>collapse</code> 属性指定是否折叠代码，默认是false；当选择true时，showMsg、hideMsg属性有效；</li>
			<li><code>showMsg</code> 属性指定折叠代码时，展开折叠显示的按钮显示的字样。当collapse为true时有效，默认是“展开示例代码”；</li>
			<li><code>hideMsg</code> 属性指定折叠代码时，关闭折叠显示的按钮显示的字样。当collapse为true时有效，默认是“隐藏示例代码”。</li>
		</ul>
		</p>
		<div class="bs-example">
			<div class="row">
				<div class="col-sm-12 text-center">
					<div class="camera_wrap camera_emboss pattern_6" data-sea="seaCamera">
						<div data-thumb="images/slider/thumbs/leaf.jpg" data-src="images/slider/leaf.jpg">
							<div class="camera_caption fadeFromTop">
								It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/bridge.jpg" data-src="images/slider/bridge.jpg">
							<div class="camera_caption fadeFromTop">
								It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/road.jpg" data-src="images/slider/road.jpg">
							<div class="camera_caption fadeFromLeft">
								<em>It's completely free</em> (even if a donation is appreciated)
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/sea.jpg" data-src="images/slider/sea.jpg">
							<div class="camera_caption fadeFromRight">
								Camera slideshow provides many options <em>to customize your project</em> as more as possible
							</div>
						</div>
						<div data-thumb=images/slider/thumbs/shelter.jpg" data-src="images/slider/shelter.jpg">
							<div class="camera_caption fadeFromLeft">
								It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="#" target="_blank">have a look</a>)
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/tree.jpg" data-src="images/slider/tree.jpg">
							<div class="camera_caption fadeFromTop">
								Different color skins and layouts available, <em>fullscreen ready too</em>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="bs-sidebar sea-example">
						<pre data-sea="seaSnippet" data-config="seaSnippet">
&lt;div class=&quot;camera_wrap camera_emboss pattern_6&quot; data-sea=&quot;seaCamera&quot;&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/leaf.jpg&quot; data-src=&quot;images/slider/leaf.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromTop&quot;&gt;
			It uses a light version of jQuery mobile, &lt;em&gt;navigate the slides by swiping with your fingers&lt;/em&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/bridge.jpg&quot; data-src=&quot;images/slider/bridge.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromTop&quot;&gt;
			It uses a light version of jQuery mobile, &lt;em&gt;navigate the slides by swiping with your fingers&lt;/em&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/road.jpg&quot; data-src=&quot;images/slider/road.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromLeft&quot;&gt;
			&lt;em&gt;It's completely free&lt;/em&gt; (even if a donation is appreciated)
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/sea.jpg&quot; data-src=&quot;images/slider/sea.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromRight&quot;&gt;
			Camera slideshow provides many options &lt;em&gt;to customize your project&lt;/em&gt; as more as possible
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=images/slider/thumbs/shelter.jpg&quot; data-src=&quot;images/slider/shelter.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromLeft&quot;&gt;
			It supports captions, HTML elements and videos and &lt;em&gt;it's validated in HTML5&lt;/em&gt; (&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;have a look&lt;/a&gt;)
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/tree.jpg&quot; data-src=&quot;images/slider/tree.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromTop&quot;&gt;
			Different color skins and layouts available, &lt;em&gt;fullscreen ready too&lt;/em&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre></div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 text-center" id="sliderDiv">
					<div class="camera_wrap camera_emboss" data-sea="seaCamera" style="width: 80%;" data-config="slider">
						<div data-thumb="images/slider/thumbs/leaf.jpg" data-src="images/slider/leaf.jpg">
							<div class="camera_caption scrollLeft">
								It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/bridge.jpg" data-src="images/slider/bridge.jpg">
							<div class="camera_caption scrollLeft">
								It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/road.jpg" data-src="images/slider/road.jpg">
							<div class="camera_caption scrollLeft">
								<em>It's completely free</em> (even if a donation is appreciated)
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/sea.jpg" data-src="images/slider/sea.jpg">
							<div class="camera_caption scrollLeft">
								Camera slideshow provides many options <em>to customize your project</em> as more as possible
							</div>
						</div>
						<div data-thumb=images/slider/thumbs/shelter.jpg" data-src="images/slider/shelter.jpg">
							<div class="camera_caption scrollLeft">
								It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="#" target="_blank">have a look</a>)
							</div>
						</div>
						<div data-thumb="images/slider/thumbs/tree.jpg" data-src="images/slider/tree.jpg">
							<div class="camera_caption scrollLeft">
								Different color skins and layouts available, <em>fullscreen ready too</em>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="bs-sidebar sea-example">
						<pre data-sea="seaSnippet" data-config="seaSnippet">
&lt;div class=&quot;camera_wrap camera_emboss pattern_6&quot; data-sea=&quot;seaCamera&quot;&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/leaf.jpg&quot; data-src=&quot;images/slider/leaf.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromTop&quot;&gt;
			It uses a light version of jQuery mobile, &lt;em&gt;navigate the slides by swiping with your fingers&lt;/em&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/bridge.jpg&quot; data-src=&quot;images/slider/bridge.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromTop&quot;&gt;
			It uses a light version of jQuery mobile, &lt;em&gt;navigate the slides by swiping with your fingers&lt;/em&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/road.jpg&quot; data-src=&quot;images/slider/road.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromLeft&quot;&gt;
			&lt;em&gt;It's completely free&lt;/em&gt; (even if a donation is appreciated)
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/sea.jpg&quot; data-src=&quot;images/slider/sea.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromRight&quot;&gt;
			Camera slideshow provides many options &lt;em&gt;to customize your project&lt;/em&gt; as more as possible
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=images/slider/thumbs/shelter.jpg&quot; data-src=&quot;images/slider/shelter.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromLeft&quot;&gt;
			It supports captions, HTML elements and videos and &lt;em&gt;it's validated in HTML5&lt;/em&gt; (&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;have a look&lt;/a&gt;)
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-thumb=&quot;images/slider/thumbs/tree.jpg&quot; data-src=&quot;images/slider/tree.jpg&quot;&gt;
		&lt;div class=&quot;camera_caption fadeFromTop&quot;&gt;
			Different color skins and layouts available, &lt;em&gt;fullscreen ready too&lt;/em&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre></div>
				</div>
			</div>
		</div>
	</div>
</div>